<template>
  <view :style="colorStyle">
    <view
      class="bannerModule"
      :style="{
        paddingTop: `${info.style.pTop * 2}rpx`,
        paddingLeft: `${info.style.pLeft * 2}rpx`,
        paddingRight: `${info.style.pRight * 2}rpx`,
        paddingBottom: `${info.style.pBottom * 2}rpx`,
        marginTop: `${info.style.mTop * 2}rpx`,
        marginLeft: `${info.style.mLeft * 2}rpx`,
        marginRight: `${info.style.mRight * 2}rpx`,
        marginBottom: `${info.style.mBottom * 2}rpx`,
      }"
    >
      <view class="block1">
        <swiper
          :current="current"
          @change="bannerChange"
          :indicator-dots="false"
          :circular="true"
          :autoplay="true"
          :interval="
            info.style.second == '3000'
              ? 3000
              : info.style.second == '5000'
              ? 5000
              : 3000
          "
          :duration="500"
          :style="{ height: `${info.height * 2}rpx` }"
        >
          <swiper-item v-for="(i, index, key) in info.value" :key="key">
            <image
              @click="tabbarChange(i)"
              :src="i.link"
              alt=""
              :style="{
                borderRadius: info.style.type == 'round' ? '20rpx' : '',
              }"
              mode="aspectFill"
            />
          </swiper-item>
        </swiper>
        <view class="dots flex aitems jcenter" v-if="info.style.types == 1">
          <view
            :class="current === indexs ? 'dotsActive dotsItem' : 'dotsItem'"
            :style="{
              background: `${
                info.style.dotsType == 1 && current === indexs
                  ? 'var(--view-theme)'
                  : info.style.dotsType == 2 && current === indexs
                  ? info.style.zdyColor
                  : ''
              }`,
            }"
            v-for="(items, indexs, keys) in info.value"
            :key="keys"
          ></view>
        </view>
        <view
          class="dots2 flex aitems jcenter"
          :style="{
            background: `${
              info.style.dotsType == 1
                ? 'var(--view-theme)'
                : info.style.dotsType == 2
                ? info.style.zdyColor
                : ''
            }`,
          }"
          v-if="info.style.types == 2"
        >
          <view class="dotsItem">
            {{ current + 1 + "/" + info.value.length }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import colors from "@/mixins/color";
import { navigateTo } from "@/utils/navigateTo";
export default {
  mixins: [colors],
  props: {
    info: {
      default: {},
    },
  },
  data() {
    return {
      current: 0,
    };
  },
  mounted() {
    console.log(this.info);
  },
  methods: {
    bannerChange(e) {
      // console.log(e)
      if (e.detail.source == "touch") {
        this.current = e.detail.current;
      }
    },
    tabbarChange(item) {
      navigateTo(item);
    },
  },
};
</script>

<style lang="scss" scoped>
.bannerModule {
  .block1 {
    width: 100%;
    position: relative;

    image {
      width: 100%;
      height: 100%;
      display: flex;
      object-fit: cover;
    }

    .dots {
      position: absolute;
      bottom: 0;
      height: 40rpx;
      width: 100%;
      z-index: 9;

      .dotsItem {
        width: 12rpx;
        height: 12rpx;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        margin: 0 4rpx;
      }

      .dotsActive {
        width: 12rpx;
        height: 12rpx;
        background: rgba(000, 000, 000, 0.7);
        border-radius: 50%;
      }
    }

    .dots2 {
      position: absolute;
      right: 20rpx;
      bottom: 20rpx;
      background: rgba(000, 000, 000, 0.7);
      color: #fff;
      padding: 8rpx 20rpx;
      z-index: 2;
      border-radius: 8rpx;
      font-size: 24rpx;

      .dotsItem {
      }
    }
  }
}
</style>
